{% extends 'base.html' %}

{% block container %}
    <div class="top-pad">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/create_photo.css') }}">
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        let detail_div = 1;
        function add_div() {
            let e = document.getElementById("details0");
            let div = document.createElement("div");
            div.className = "form-group";
            div.id = "details" + detail_div;
            div.innerHTML = e.innerHTML;
            document.getElementById("form").appendChild(div);
            detail_div++;
        }
        function del_div() {
          if(detail_div >1){
                let id = "details" + (detail_div - 1).toString();
                let e = document.getElementById(id);
                document.getElementById("form").removeChild(e);
                detail_div--;
            }
        }
    </script>

    <form id="form" role="form" method="post" class="formBuilder">
	    <div class="form-inline">
	        <label for="details" >创建证件照</label>&nbsp;&nbsp;&nbsp;
	        <button type="button" id="add-btn" onclick="add_div()">添加</button>&nbsp;&nbsp;&nbsp;
	        <button type="button" id="del-btn" onclick="del_div()">删除</button>&nbsp;&nbsp;&nbsp;
            <input type="button" id="sub" value="生成证件照">
	    </div><br>

	    <div class="form-group" id="details0">
	        <div class="form-inline">
		          	年龄:<span style="color: red; font-size: 20px">*</span>
                    <input id="ageID" name="ageID" placeholder="输入数字..." oninput="value=value.replace(/\D/g,'')">
                    性别:<select class="selected" id="sexID">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    格式:<select class="selected" id="formatID" title="first：x岁第一天、last：x岁最后一天、ago：x天之前">
                            <option value="first">first</option>
                            <option value="last">last</option>
                            <option value="ago">ago</option>
                        </select>
		           	生效日:<span style="color: red; font-size: 20px">*</span>
                    <input id="effectID" placeholder="T+N，输入数字..." oninput="value=value.replace(/\D/g,'')">
                    区域码:<input list="areas" name="browser" id="area" placeholder="为空随机选择区域码" title="输入一个区域的名称或者代码来检索">
                            <datalist id="areas">
                            {% for k, v in areas.items() %}
                            <option value="{{ k }}">{{ v }}</option>
                            {% endfor %}
                            </datalist>
	        </div>
	    </div>
	</form>

    <div class="box">
        <ul id="imagesLook"></ul>
    </div>

    <script type="text/javascript">
        $("#sub").click(function (){
            let all_mess = []
            // 多个相同的属性值，比如ID使用：[id=ageID] 来遍历
            $.each($("[id=ageID]"), function (i){
                // 路径拼接
                let age_path = "#details"+i+" "+".form-inline #ageID"
                let sex_path = "#details"+i+" "+".form-inline #sexID"
                let format_path = "#details"+i+" "+".form-inline #formatID"
                let effect_path = "#details"+i+" "+".form-inline #effectID"
                let area_path = "#details"+i+" "+".form-inline #area"
                if ($(age_path).val() === "" || $(effect_path).val() === ""){
                    i += 1
                    alert("请输入第 "+i+" 列内容为空的项，前面拥有完整数据的将会生成证件照~")
                }else {
                    let one_mess = [$(age_path).val(), $(sex_path).val(),$(format_path).val(),$(effect_path).val(),$(area_path).val()]
                    console.log(one_mess)
                    all_mess.push(one_mess)
                }
            })
            if (all_mess.length === 0){
                console.log("数组为空")
                alert("没有获取到任何可以向后端传递的list，请检查~")
            } else {
                console.log(all_mess)
                let form_data = new FormData();
                // 将数组转为JSON字符串
                form_data.append("all_mess", JSON.stringify(all_mess))
                $.ajax({
                    url: "{{ url_for('create_photo.id_photo') }}",
                    type: "post",
                    async: false,
                    data: form_data,
                    processData: false,
                    contentType: false,
                    success:function (data){
                        let str = ''
                        $.each(data.data, function (i, obj){
                            str += '<li>'
                            str += '<div class="deatil">'
                            str += '<h3>'+obj.infos+'</h3>'
                            str += '<p>证件号：'+obj.outputs.num+'</p>'
                            str += '<p>生日：'+obj.outputs.birthday+'</p>'
                            str += '<p>生效日：'+obj.effective+'</p>'
                            str += '<p>地址：'+obj.outputs.address+'</p>'
                            str += '<a href="'+obj.base64+'" download="'+obj.filename+'.jpeg" id="aImage">下载图片</a>'
                            str += '</div>'
                            str += '<img src="'+obj.base64+'" width="280px" height="180px" alt="">'
                            str += '</li>'
                        })
                        $("#imagesLook").append(str)
                    },
                    error:function (){alert("获取生成证件所需数据的Ajax请求失败了")}
                })
            }
        })
    </script>

    </div>

{% endblock %}
